<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">



  <meta name="description" content="关于html登录界面的简单学习"/>




  <meta name="keywords" content="html, css, 八一" />



  <meta name="baidu-site-verification" content="HhUstaSjr0" />



  <meta name="google-site-verification" content="UA-102975942-1" />






  <link rel="alternate" href="/atom.xml" title="八一">




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=2.6.0" />



<link rel="canonical" href="https://bay1.top/2017/03/09/关于html登录界面/"/>


<link rel="stylesheet" type="text/css" href="/css/style.css?v=2.6.0" />
<link rel="stylesheet" type="text/css" href="/css/prettify.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/sons-of-obsidian.css" media="screen" />



  <link rel="stylesheet" type="text/css" href="/lib/fancybox/jquery.fancybox.css" />




  
  <script id="baidu_analytics">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9a885cc9fb6cd7bcef579deb8efe8a70";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <script id="google_analytics">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-102975942-1', 'auto');
        ga('send', 'pageview');
  </script>










    <title> 关于html登录界面的简单学习 - 八一 </title>
  </head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/." class="logo">八一</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/archives">
        <li class="mobile-menu-item">
          
          
            文章
          
        </li>
      </a>
    
      <a href="/tags">
        <li class="mobile-menu-item">
          
          
            标签
          
        </li>
      </a>
    
      <a href="/about">
        <li class="mobile-menu-item">
          
          
            关于/友链
          
        </li>
      </a>
    
      <a href="/search">
        <li class="mobile-menu-item">
          
          
            站内搜索
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/." class="logo">八一</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/archives">
            
            
              文章
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/tags">
            
            
              标签
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/about">
            
            
              关于/友链
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/search">
            
            
              站内搜索
            
          </a>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          关于html登录界面的简单学习
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          2017-03-09
        </span>
        
        
        
      </div>
    </header>

    
    
  <div class="post-toc" id="post-toc">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#html的简单结构"><span class="toc-text">html的简单结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#空格，居中"><span class="toc-text">空格，居中</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-首先想到的肯定是加空格"><span class="toc-text">1.首先想到的肯定是加空格</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-或者另一种方法居中"><span class="toc-text">2.或者另一种方法居中</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-还有其他的，比如css盒子模型"><span class="toc-text">3.还有其他的，比如css盒子模型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#跳转网址"><span class="toc-text">跳转网址</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#账户名，密码框"><span class="toc-text">账户名，密码框</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js跳转其他页面"><span class="toc-text">js跳转其他页面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#如何连接后端文件"><span class="toc-text">如何连接后端文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#结果"><span class="toc-text">结果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#我是分割线-补充于2017-03-29"><span class="toc-text">我是分割线-补充于2017-03-29</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#插入图片"><span class="toc-text">插入图片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#简单有序化和无序化列表"><span class="toc-text">简单有序化和无序化列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#表单"><span class="toc-text">表单</span></a></li></ol></li></ol>
    </div>
  </div>


    <div class="post-content">
      
        <p>最近组内要求做一个简单的前后端结合的登陆界面，我是真的不会前端啊。。。<br>不过任务还是要做的嘛<br>在组内前端大佬的简单指导和搜索之后，也算懂了点html吧 <a id="more"></a></p>
<h2 id="html的简单结构"><a href="#html的简单结构" class="headerlink" title="html的简单结构"></a>html的简单结构</h2><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>输入你的标题<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>这是主体部分<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>很简单的总体结构，发现html很对称啊</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>我是换行的<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">我相当于text的回车<span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>这两个是用来换行的，只是p会在换行之后添加空白<br>head,body就是英语表面的意思</p>
</blockquote>
<h2 id="空格，居中"><a href="#空格，居中" class="headerlink" title="空格，居中"></a>空格，居中</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"color:red"</span>&gt;</span>欢迎登录阿里巴巴后台系统<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>写了标题部分，但是总是想着，让它位于页面中间</p>
</blockquote>
<h3 id="1-首先想到的肯定是加空格"><a href="#1-首先想到的肯定是加空格" class="headerlink" title="1.首先想到的肯定是加空格"></a>1.首先想到的肯定是加空格</h3><blockquote>
<p>但是在HTML中，空格是没用的，要是实在想加空格的话，就要用语法&amp; nbsp;<br>&amp; nbsp;本身就代表空格，你可以在它后边再加一个空格，但是只能加一个。所以。。。。<br>用这种方法就要这样。。(很傻的样子)</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"color:red"</span>&gt;</span>&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; </span><br><span class="line">&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; </span><br><span class="line">&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;欢迎登录阿里巴巴后台系统<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="2-或者另一种方法居中"><a href="#2-或者另一种方法居中" class="headerlink" title="2.或者另一种方法居中"></a>2.或者另一种方法居中</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>&gt;</span>欢迎登录阿里巴巴后台系统<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>就是在文字外层加一个align=”center”</p>
</blockquote>
<h3 id="3-还有其他的，比如css盒子模型"><a href="#3-还有其他的，比如css盒子模型" class="headerlink" title="3.还有其他的，比如css盒子模型"></a>3.还有其他的，比如css盒子模型</h3><blockquote>
<p>这个我还没很研究</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"logo-name"</span> <span class="attr">style</span>=<span class="string">"font-weight: normal; margin: 50px 0; font-size: 70px; letter-spacing: 1px;"</span>&gt;</span>Alibaba<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="跳转网址"><a href="#跳转网址" class="headerlink" title="跳转网址"></a>跳转网址</h2><blockquote>
<p>做了这样一个东西，经常见人家加上自己的网址，我就开始尝试，来次装逼</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>作者:<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"flywinky.top"</span>&gt;</span>八一<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>但是事实证明这样是不起作用的，需要加上 http:// 就好啦</p>
</blockquote>
<h2 id="账户名，密码框"><a href="#账户名，密码框" class="headerlink" title="账户名，密码框"></a>账户名，密码框</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">tyle</span>=<span class="string">"text/password"</span> <span class="attr">name</span>=<span class="string">"user/password"</span> <span class="attr">value</span>=<span class="string">"一般填写提示内容"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>表单一类控件都要写在form之间，以能够上传到服务器<br>text代表文本输入，password代表密码文本输入，name就是它的名称</p>
</blockquote>
<h2 id="js跳转其他页面"><a href="#js跳转其他页面" class="headerlink" title="js跳转其他页面"></a>js跳转其他页面</h2><blockquote>
<p>在搜索如何连接后端文件的时候，偶然查到了另一种东西<br>就是用js写一个函数login</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>Alibaba<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"shortcut icon"</span> <span class="attr">type</span>=<span class="string">"image/x-icon"</span> <span class="attr">href</span>=<span class="string">"./123.jpg"</span>&gt;</span> </span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"color:red"</span>&gt;</span>欢迎登录阿里巴巴后台系统<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	作者:<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://bayi27.github.io"</span>&gt;</span>八一<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"color:blue"</span>&gt;</span>管理员登录<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		账户：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>  <span class="attr">id</span>=<span class="string">"name"</span> /&gt;</span><span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line">		密码：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span>  <span class="attr">id</span>=<span class="string">"pass"</span> /&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"登录"</span> <span class="attr">onclick</span>=<span class="string">"return login()"</span>/&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">   <span class="function"><span class="keyword">function</span> <span class="title">login</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> name=<span class="built_in">document</span>.getElementById(<span class="string">"name"</span>).value;</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> pass=<span class="built_in">document</span>.getElementById(<span class="string">"pass"</span>).value;</span></span><br><span class="line"><span class="actionscript">		<span class="keyword">if</span>(name==<span class="string">"admin"</span> &amp;&amp; pass==<span class="string">"admin"</span>)&#123;</span></span><br><span class="line"><span class="actionscript">			alert(<span class="string">"登录成功！！！但是别激动，先看段月食吧。。。。。。"</span>);</span></span><br><span class="line"><span class="javascript">			<span class="built_in">window</span>.location.href=<span class="string">"https://flywinky.top/demo.html"</span> </span></span><br><span class="line"><span class="undefined">		&#125;</span></span><br><span class="line"><span class="actionscript">		<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">window</span>.location.href=<span class="string">"https://flywinky.top/404.html"</span> ;</span></span><br><span class="line"><span class="undefined">			&#125;   </span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>在登录代码后面加上onlick=””-&gt;点击鼠标后执行””里面的函数</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"登录"</span> <span class="attr">onclick</span>=<span class="string">"login()"</span>/&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>document.getElementById(“name”).value可以获取表单输入内容</p>
</blockquote>
<p>PS：跳转本地的html要用window.location=”xxx.html”</p>
<h2 id="如何连接后端文件"><a href="#如何连接后端文件" class="headerlink" title="如何连接后端文件"></a>如何连接后端文件</h2><blockquote>
<p>orz还个还没搞好，需要用框架写python，以后单独更新吧。</p>
</blockquote>
<h2 id="结果"><a href="#结果" class="headerlink" title="结果"></a>结果</h2><p>最后的就是这样一个很简单也很丑的html界面，只是用颜色的时候加了一些内含的css语法<br><img src="https://s1.ax1x.com/2018/01/01/pSRI4U.png" alt="html的简单结构"></p>
<hr>
<h2 id="我是分割线-补充于2017-03-29"><a href="#我是分割线-补充于2017-03-29" class="headerlink" title="我是分割线-补充于2017-03-29"></a><div align="center">我是分割线-补充于2017-03-29</div></h2><h3 id="插入图片"><a href="#插入图片" class="headerlink" title="插入图片"></a>插入图片</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"填写链接或者本地路径"</span> <span class="attr">alt</span>=<span class="string">"图片说明文字"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>如果想把图片加超链接，可以用这种方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"链接"</span>&gt;</span><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"填写链接或者本地路径"</span> <span class="attr">alt</span>=<span class="string">"图片说明文字"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="简单有序化和无序化列表"><a href="#简单有序化和无序化列表" class="headerlink" title="简单有序化和无序化列表"></a>简单有序化和无序化列表</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">li</span>&gt;</span>我是有序的<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">li</span>&gt;</span>我是无序的<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">'5'</span>&gt;</span> <span class="comment">&lt;!--这里的border是表单格式，选择不同数字的格式不同--&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">th</span>&gt;</span>我是表头<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">tr</span>&gt;</span> </span><br><span class="line">		<span class="tag">&lt;<span class="name">td</span>&gt;</span>我是行<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">td</span>&gt;</span>我是第二行<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">		我多了一列</span><br><span class="line">	<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>
      
    </div>

    
      
      



      
      
    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/tags/html/">html</a>
            
              <a href="/tags/css/">css</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
      <a class="prev" href="/2017/03/18/一个简单的小demo/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">一个简单的小demo</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/2017/03/02/天朝挖煤ctf/">
        <span class="next-text nav-default">天朝挖煤CTF</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div> 
    </div>
  </div>


        </div>
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="https://github.com/bay1" class="iconfont icon-github" title="github"></a>
        
      
    
      
        
          <a href="http://weibo.com/3190704711/profile?topnav=1&wvr=6&is_all=1" class="iconfont icon-weibo" title="weibo"></a>
        
      
    
      
    
      
    
      
    
    
    
  </div>


<div class="copyright">
  <span class="copyright-year">
    
    &copy; 
     
      2016 - 
    
    2018
    <span class="author">bay1</span>
  </span>
</div>
      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  
  <script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://bay1.top/2017/03/09/关于html登录界面/';
        this.page.identifier = '2017/03/09/关于html登录界面/';
        this.page.title = '关于html登录界面的简单学习';
    };
    (function() {
    var d = document, s = d.createElement('script');

    s.src = '//https-blog-flywinky-top-1.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();  
  </script>



    
  





  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  
    <script type="text/javascript" src="/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/lib/fancybox/jquery.fancybox.pack.js"></script>
  


    <script type="text/javascript" src="/js/src/even.js?v=2.6.0"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=2.6.0"></script>
<script src="/js/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('pre').addClass('prettyprint');
   prettyPrint();
 })
</script>
  </body>
</html>
